<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图</title>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/feiyan.js"></script>
    <style>
        .abc{
            color:#671600;
        }
    </style>
</head>
<body>
    <div id="app" style="width:1400px; height:860px"></div>
    <script>
        // console.log(data.data.feiyan.provinces)
        var provinces = data.data.feiyan.provinces;
        var mychart = echarts.init(document.getElementById("app"));
        var option = {
            title:{text:"中国地图"},
            tooltip:{
                formatter(e){
                    // console.log(e);
                    return `<strong>${e.name}</strong><br/>
                    累计确诊:${e.value}<br/>
                    累计治愈:${e.data.cure_cnt?e.data.cure_cnt:0}<br>
                    累计死亡:${e.data.die_cnt?e.data.die_cnt:0}
                    `
                }
            },
            // 虚拟映射（把数值在途中通过颜色映射）
            visualMap: {
                type: 'piecewise', //连续类型
                pieces: [
                {min: 1500,color:"#671600"}, // 不指定 max，表示 max 为无限大（Infinity）。
                {min: 900, max: 2000,color:"#a93819"},
                {min: 310, max: 1000,color:"#c9772f"},
                {min: 200, max: 300,color:"#f0e175"},
                {min: 10, max: 200,color:"#fcfcd8" },     
                {max: 5,color:"#eee"}     // 不指定 min，表示 min 为无限大（-Infinity）。
                 ]
                        
            },

            series:[
                {name:"china",type:"map",data:[]}
            ]
        }
        mychart.setOption(option);
        // 加载地图的数据
        function getMap(obj={en:'china'}){
                // ES6 ajax请求内置api 发起get请请求
                fetch("./map/json/province/"+obj.en+".json")
                // 默认获取的数据流，转换为json格式（固定的格式）
                // res=>res.text() 也可以转换为文本（固定的格式）
                .then(res=>res.json())
                // 获取成功
                .then(res=>{
                    // echarts 注册地图
                    echarts.registerMap(obj.en,res);
                    // 修改option
                    option.series[0].mapType = obj.en;
                    if(obj.en=="china"){
                        // 把省份数据映射出来，添加value与name
                        option.series[0].data = provinces.map(item=>({...item,name:item.province,value:item.sure_cnt
}))
                    }
                    // 更新地图选项
                    mychart.setOption(option)
                })
                // 网络请求失败
                .catch(err=>console.log(err))
        }
        getMap();

    </script>
</body>
</html>